<template>
	<view class="message-wrap">
		<view class="container">
			<view class="life-circle-header w100 bg-white">
				<customTabBar />
				<view class="search-wrap w100">
					<view class="input relative text-center">
						<text class="iconfontPT iconsousuo" catchtap="initGetDataFn"></text>
						<input placeholder-class="placeholder-fs" type="text" v-model="search" placeholder="搜索联系人" @input="handleSearch">
					</view>
				</view>
			</view>
			<view class="message-list">
				<!-- <view class="system-message">
					<view class="item system-message-item clear bg-white" v-for="(item, index) in systemConversation" :key="index">
						<view class="system clear" @longpress="longTimePress(item)" @click="checkoutNotification(item)">
							<image class="avatar pull-left" src="/static/images/system_notification.png" />
							<view class="info pull-left">
								<view class="top flex-x-between">
									<text class="name bold">系统通知</text>
									<text class="date gray"></text>
								</view>
								<view class="bottom flex-x-between">
									<text class="text gray">点击查看</text>
									<view class="amount bg-theme text-center" v-if="item.unreadCount > 0">
										<text v-if="item.unreadCount > 99">99+</text>
										<text v-else>{{item.unreadCount}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view> -->
				<view class="other-message">
					<view class="item clear bg-white" v-for="(item, index) in friendConversation" :key="index">
						<view class="friend-message clear" @longpress="longTimePress(item)" @click="checkoutConversation(item, item.userProfile.nick || item.userProfile.userID)">
							<image class="avatar pull-left" :src="item.userProfile.avatar || '/static/images/head.png'" />
							<view class="info pull-left">
								<view class="top flex-x-between">
									<text class="name bold">{{item.userProfile.nick || item.userProfile.userID}}</text>
									<text class="date gray">{{item.lastMessage._lastTime}}</text>
								</view>
								<view class="bottom flex-x-between">
									<text class="text gray" v-if="!item.lastMessage.isRevoked">
										{{item.lastMessage.messageForShow}}
									</text>
									<text class="text gray" v-else>
										<template v-if="myInfo.userID === item.lastMessage.fromAccount">你撤回了一条消息</template>
										<template v-else>{{item.lastMessage.fromAccount}}撤回了一条消息</template>
									</text>
									<view class="amount bg-theme text-center" v-if="item.unreadCount > 0">
										<text v-if="item.unreadCount > 99">99+</text>
										<text v-else>{{item.unreadCount}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="item clear bg-white" v-for="(item, index) in groupConversation" :key="index">
						<view class="group-message clear" @click="checkoutConversation(item, item.groupProfile.name || item.groupProfile.ID)"
						 @longpress="longTimePress(item)">
							<image class="avatar pull-left" :src="item.groupProfile.avatar || '/static/images/head.png'" />
							<view class="info pull-left">
								<view class="top flex-x-between">
									<text class="name bold">{{item.groupProfile.name || item.groupProfile.groupID}}</text>
									<text class="date gray">{{item.lastMessage._lastTime=='1970-01-01' ? item.groupProfile.createTime : item.lastMessage._lastTime}}</text>
								</view>
								<view class="bottom flex-x-between">
									<text class="text gray" v-if="!item.lastMessage.isRevoked">
										<template v-if="item.lastMessage.fromAccount === '@TIM#SYSTEM'">{{item.lastMessage.messageForShow}}</template>
										<template v-else>{{item.lastMessage.messageForShow}}</template>
									</text>
									<text class="text gray" v-else>
										<template v-if="myInfo.userID === item.lastMessage.fromAccount">你撤回了一条消息</template>
										<template v-else>{{item.lastMessage.fromAccount}}撤回了一条消息</template>
									</text>
									<view class="amount bg-theme text-center" v-if="item.unreadCount > 0">
										<text v-if="item.unreadCount > 99">99+</text>
										<text v-else>{{item.unreadCount}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<no-data v-if="!allConversation.length" />
			</view>
		</view>
		<homeTabBar />
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import homeTabBar from '../../home-tab-bar/index.vue';
	import customTabBar from '../../components/life-circle/custom-tab-bar.vue'

	export default {
		data() {
			return {
				search: '',
			}
		},
		computed: {
			judge(t) {
				return function(t) {
					console.log(t)
					return ''
					// return new Date(t).toLocaleDateString().replace(/\//g, "-") + " " + new Date(t).toTimeString().substr(0, 8)
				}
			},
			systemConversation() {
				return this.allConversation.filter(item => item.type === '@TIM#SYSTEM')
			},
			friendConversation() {
				return this.allConversation.filter(item => item.type === 'C2C')
			},
			groupConversation() {
				return this.allConversation.filter(item => item.type === 'GROUP')
			},
			...mapGetters(['timTotalUnreadCount', 'allConversation', 'isSdkReady', 'myTimInfo'])
		},
		components: {
			homeTabBar,
			customTabBar
		},
		onShow() {
			this.$store.dispatch("life-circle/setCurrentTabbar", 2);
		},
		methods: {
			handleSearch() {
				this.$store.commit('tim/CONVERSATION_SEARCH', this.search)
			},
			// 长按删除会话
			longTimePress(item) {
				this.conversation = item
				this.handleModalShow()
			},
			handleModalShow() {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "确认删除会话？",
					success: res => {
						res.confirm && _this.handleConfirm();
					}
				});
			},
			handleConfirm() {
				this.deleteConversation(this.conversation);
			},
			// 点击某会话
			checkoutConversation(item, name) {
				const params = {
					url: '/pages/life-circle/chat-box/index',
					conversationID: item.conversationID
				}
				this.$store.dispatch('tim/checkoutConversation', params)
			},
			// 删除会话
			deleteConversation(item) {
				uni.$Tim.deleteConversation(item.conversationID)
					.then(res => {
						console.log('delete success', res)
					})
			},
			// 将某会话设为已读
			setMessageRead(item) {
				if (item.unreadCount === 0) {
					return
				}
				uni.$Tim.setMessageRead({
					conversationID: item.conversationID
				})
			},
			// 点击系统通知时，处理notification
			checkoutNotification(item) {
				this.$store.commit('tim/RESET_CURRENT_CONVERSATION')
				this.$store.commit('tim/RESET_GROUP')
				this.setMessageRead(item)
				uni.$Tim.getConversationProfile(item.conversationID)
					.then((res) => {
						this.$store.commit('tim/UPDATE_CURRENT_CONVERSATION', res.data.conversation)
						this.$store.dispatch('tim/getMessageList')
					})
				let url = '/pages/life-circle/sysetm-msg/index'
				uni.navigateTo({
					url
				})
			},
		},
	}
</script>

<style lang="less">
	.message-wrap {
		padding-bottom: 160rpx;

		.life-circle-header {
			padding: 20rpx 0;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 111;

			.search-wrap {
				padding: 30rpx 35rpx 20rpx 35rpx;
				height: 60rpx;
				box-sizing: border-box;

				.input {
					.iconsousuo {
						position: absolute;
						left: 235rpx;
						top: 8rpx;
						font-size: 28rpx;
					}

					height: 60rpx;
					border-radius: 100rpx;
					background: #f8f8f8;

					input {
						box-sizing: border-box;
						height: 100%;
						padding: 5px 37px 4px 38px;
					}
				}
			}
		}


		.message-list {
			background: rgba(245, 245, 245, 1);
			height: calc(100vh - 200rpx);
			padding-top: 20rpx;
			margin-top: 200rpx;

			.item {
				border-bottom: 1rpx solid rgba(195, 195, 195, .5);

				.avatar {
					width: 90rpx;
					height: 90rpx;
					border-radius: 100%;
				}

				.info {
					width: calc(100% - 120rpx);
					padding-left: 26rpx;

					.date {
						font-size: 24rpx;
						;
					}

					.amount {
						width: 40rpx;
						height: 40rpx;
						font-size: 24rpx;
						border-radius: 100%;
						color: #ffffff;
						line-height: 40rpx;
					}
				}

				padding: 20rpx 30rpx;

			}

			.system-message {
				margin-bottom: 20rpx;

				.system-message-item {
					&:last-child {
						border-bottom-color: transparent;
					}
				}

			}

		}
	}
</style>
